{% extends 'master/layout_menu.html' %}

{% block css %}
    <link rel="stylesheet" href="/static/css/plugsin.css"/>
    <style>
        .form-error {
            font-size: 8px;
            position: absolute;
            bottom: -17px;
            color: #EC6868;
            margin: 0 15px;
            left: 0px;
            right: 0px;
            background: #f2dede;
            padding: 0 5px;
        }
        .popover{
            max-width: 500px !important;
        }
    </style>
{% endblock %}


{% block breadcrumb %}
    <li><a href="/home/index/">首页</a></li>
    <li><a href="#">用户</a></li>
    <li class="active">用户类型</li>
{% endblock %}

{% block content %}

    <div style="margin-top: 20px;">

        <div class="clearfix mt-20">
            <div class="col-md-12" >
                <div class="list-block" >
                    <div class="clearfix function-area-simple" style="padding: 10px;;">
                        <div class="col-md-8 no-padding">
                            <div class="btn-group btn-group-sm">
                                <a class="btn btn-default no-radius" onclick="$.CheckAll('#table-body')"><i class="fa fa-check-square"></i> 全选</a>
                                <a class="btn btn-default no-radius" onclick="$.UnCheckAll('#table-body')"><i class="fa fa-minus-square-o"></i> 取消</a>
                                <a class="btn btn-default no-radius" onclick="$.ReverseCheck('#table-body')"><i class="fa fa-check-square-o"></i> 反选</a>
                                <a class="btn btn-default no-radius" href="#" data-toggle="modal" data-keyboard="false" data-target="#do_add_modal" ><i class="fa fa-plus-circle"></i> 添加</a>
                                <a class="btn btn-default no-radius" onclick="$.Show('#shade,#modal_delete');"><i class="fa fa-trash"></i> 删除</a>
                                <a id="edit_mode_target" class="btn btn-default no-radius" onclick="$.TableEditMode(this,'#table-body')"><i class="fa fa-pencil-square-o"></i> <span>进入编辑模式</span></a>
                                <a class="btn btn-default no-radius" onclick="Save()"><i class="fa fa-floppy-o"></i> 保存</a>
                                <a class="btn btn-default no-radius" onclick="Refresh()"><i class="fa fa-refresh"></i> 刷新</a>
                                <a id="handle_status" class="btn no-radius" tabindex="0" role="button" data-toggle="manual" data-trigger="focus" data-container="body" data-html="true" data-placement="bottom" title="错误详细" data-content=""></a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-inline right">
                                <div class="form-group" id="search_conditions">
                                    <input type="email" is-condition='true' class="form-control no-radius" name="caption" placeholder="逗号分割多条件">
                                    <button type="button" class="btn btn-primary no-radius" onclick="SearchSubmit()"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive table-area">
                        <table class="table table-striped table-bordered" id="example1">
                            <thead id="table-head">
                                <tr>
                                    <th class="col-md-1">选择</th>
                                    <th en-sort="true" class="col-md-1 en-sort both">序号</th>
                                    <th en-sort="true" class="col-md-6 en-sort both">用户类型</th>
                                    <th en-sort="true" class="col-md-2 en-sort both">编码</th>
                                    <th en-sort="true" class="col-md-2 en-sort both">用户个数</th>
                                </tr>
                            </thead>
                            <tbody id="table-body" edit-mode="false">

                            </tbody>
                        </table>
                        <div class="clearfix">
                            <div class="right">
                              <ul id="pager" class="pagination pagination-sm no-margin">

                              </ul>
                           </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

<!-- 删除层开始 -->
<div id="modal_delete" class="alert alert-danger alert-dismissible fade in modal-delete hide" role="alert">
  <button type="button" class="close" aria-label="Close" onclick="$.Hide('#shade,#modal_delete');"><span>×</span></button>
  <h4>确定删除？</h4>
  <div class="mt-20">与该用户类型相关联的所有用户信息将全部被删除！<br/> &nbsp;</div>
  <div class="clearfix">
    <button type="button" class="btn btn-danger right mrl-8" onclick="DoDeleteVlan();">确定删除</button>
    <button type="button" class="btn btn-default right mrl-8" onclick="$.Hide('#shade,#modal_delete');">取消</button>
  </div>
</div>
<!-- 删除层结束 -->


<!-- 添加层开始 -->
<div class="modal fade" data-backdrop="static" id="do_add_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="do_add_form" class="form-horizontal">
                <div class="modal-header">
                    <button type="button" onclick="" class="close"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel" style="font-weight: normal;">新建用户类型（<span style="font-size: 16px;color: #666;">名称不能重复</span>）</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" style="font-weight: normal">名称：</label>
                        <div class="col-sm-9">
                            {{ form.caption }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" style="font-weight: normal">编码：</label>
                        <div class="col-sm-9">
                            {{ form.code }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <span id="do_add_status" style="color: #EC6868;"></span>
                    <button type="button" onclick="CancelModal('#do_add_form')" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" onclick="SubmitModal('#do_add_form', '#do_add_status');" class="btn btn-primary">提 交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 添加层结束 -->

{% endblock %}

{% block js %}
    <script type="text/javascript" src="/static/js/userinfo/user_type.js"></script>
{% endblock %}

